import React, { Component } from "react";
import { 
    View, 
    Text, 
    Button, 
    Image,
    TouchableNativeFeedback,//按钮点击具有水波涟漪效果（仅限android）
    StyleSheet,
 } from "react-native";
import Icon from 'react-native-vector-icons/Ionicons';
import { StackNavigator } from "react-navigation";
import DetailsScreen from './src/assets/demo/text';
import StackNavScreen from './src/assets/demo/StackNavigator';
import PageOneScreen from './src/assets/demo/pageone'

/**
 * 获取设备的尺寸
 */
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
var ScreenScale = Dimensions.get('window').scale;


class HomeScreen extends React.Component {
    constructor() {
        super();
        this.state = {
            demo:[{
                key:0,
                title:'模板',
                icon:'md-folder',
                nav:'Details',
            },{
                key:1,
                title:'HeaderColor修改',
                icon:'md-folder',
                nav:'StackNav',
            },{
                key:2,
                title:'PageOne',
                icon:'md-folder',
                nav:'PageOne',
            },{
                key:3,
                title:'模板',
                icon:'md-folder',
                nav:'',
            }]
        };
    }
    // static navigationOptions = {
        // title: "Home", //设置屏幕的title值
        // headerStyle: {
        //     backgroundColor: "#f4511e"
        // },
        // headerTintColor: "pink",
        // headerTitleStyle: {
        //     fontWeight: "bold"
        // }, //对顶部的style进行设置，同时也可以在统一入口中设置；但是需要在navigationOptions属性中包裹
        // headerTitle: <LogoTitle />,
        // headerRight: (
        //     <Button
        //         onPress={() => alert("This is a button!")}
        //         title="Info"
        //         color="#fff"
        //     />
        // )
    // };
    static navigationOptions = {
        header: null,
    }
    

    render() {
        var that = this;
        function ToNav(index){//navigator页面跳转方法
            console.log(that.state.demo[index])
            setTimeout(()=>{
                that.props.navigation.navigate(that.state.demo[index].nav)
            },600)
        }
        var boxs = this.state.demo.map((item, index) => {
            return(
                <TouchableNativeFeedback
                    key={item.key}
                    onPress={()=>{
                        ToNav(index)
                    }}
                    background={TouchableNativeFeedback.SelectableBackground()}>
                    <View style={[styles.touchItem,styles.bordershadow,index%3==2?'':styles.touchItemTe]}>
                        <Icon
                            name={item.icon}   //图片名连接,可以到这个网址搜索:http://ionicons.com/, 使用时:去掉前面的 "icon-" !!!!
                            size={50}   //图片大小
                            color="pink"  //图片颜色
                        />
                        <Text style={{color:'black'}}>{item.title}</Text>
                    </View>
                </TouchableNativeFeedback>
            );
        })
        return (
            <View
                style={{
                    flex: 1,
                    // flexDirection: 'row',
                    // justifyContent: "flex-start",
                    // flexWrap:'wrap'
                }}
            >
                <Text style={ styles.bordershadow }>Home Screen</Text>
                <Text>当前屏幕的尺寸： {ScreenWidth} * {ScreenHeight} : {ScreenScale} </Text>
                <View
                    style={styles.touchContainer}
                >
                    {boxs}
                </View>
            </View>
        );
    }
}


const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Details: {
            screen: DetailsScreen
        },
        StackNav: {
            screen: StackNavScreen
        },
        PageOne: {
            screen: PageOneScreen
        }
    },
    {
        initialRouteName: "Home"
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack />;
    }
}

const styles = StyleSheet.create({
    bordershadow:{ //阴影效果仅仅支持ios
        shadowOffset:{ width:5, height:5 }, 
        shadowColor:'black', 
        shadowOpacity:0.8, 
        shadowRadius:2,
        elevation: 4, //使得android支持灰色阴影
    },
    touchContainer:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: "flex-start",
        flexWrap:'wrap',
    },
    touchItem:{
        width: ScreenWidth/3 - 2, 
        height: ScreenWidth/3, 
        backgroundColor: '#e5e5e5', 
        justifyContent:'center', 
        alignItems: 'center',
        marginBottom:3,
    },
    touchItemTe:{
        marginRight: 3,
    }
})


// 备注：通过navigation组件设置开始的home screen页面，并将其暴露
// navigation能够记录多次跳转一个页面的状态，应该是堆栈到navigate属性下
// 传递到屏幕的属性是可以保留其的值的
